<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">


		

			<!--视频地址-->
			<video id="video"  v-show="videosrc" width="300" height="220" :src="videosrc" controls="controls" autoplay="autoplay" muted >
				
			</video>

			<br />

			<Button @click="changepic" color="red">{{ mybutton }}</Button>

			<br /><br />

			<table>
			
					<tr>
						<td style="padding:5px;">
							
							七牛云上传:

						</td>
						<td style="padding:5px;">
							
							<input type="file" @change="upload_qiniu" />

						</td>
					</tr>


					
			</table>
			
			

		</div>
	</section>
	

	
	
	
	
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import dragVerify from 'vue-drag-verify';
import {config,formatXml} from '../config.js';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'我的首页'}],
      password:'',
      password1:'',
      src:'',
      //七牛上传凭证
      uptoken:'',
      //视频地址
      videosrc:'',
      //上传进度
      loadpercent:'',
      //整型
      loadpercent_int:0,
      //切换按钮变量
      mybutton:'进入画中画'
    }
  },
  //注册组件标签
  components:{
  		'myheader':myheader
  },
  mounted:function(){

  	//获取用户信息

  	//发送请求
	this.axios.get('http://localhost:8000/userinfo/',{params:{uid:localStorage.getItem("uid")}}).then((result) =>{

					console.log(result);
			//视频地址
  			this.videosrc = 'http://q68kd6659.bkt.clouddn.com/'+result.data.img;

		});

	//获取uptoken
	this.get_uptoken();   
  
},
  methods:{
  	//定义画中画切换
  	changepic:function(){


  			//判断是否处于画中画界面
  			if(video !== document.pictureInPictureElement){

  				//尝试进入画中画模式
  				video.requestPictureInPicture();

  				this.mybutton = '退出画中画';


  			}else{

  				//退出画中画
  				document.exitPictureInPicture();

  				this.mybutton = '进入画中画';
  			}



  	},
  	//提交
  	submit:function(){


  	},
  	//获取七牛云凭证
  	get_uptoken(){

  		this.axios.get('http://localhost:8000/uptoken2/').then((result) =>{

  						console.log(result);
  						this.uptoken = result.data.token;

  		});

  	},
  	//上传七牛
  	upload_qiniu:function(e){


  		console.log(this.uptoken);

  		//获取文件对象
  		let file = e.target.files[0];

  		//声明参数
  		let param = new FormData();

  		//将上传凭证添加参数
  		param.append('token',this.uptoken);

  		//附加文件
  		param.append('file',file);

  		//定制化axios
  		const axios_qiniu = this.axios.create({withCredentials:false});

  		//发送请求
  		axios_qiniu({
  			method:'POST',
  			url:'http://up-z1.qiniu.com/',
  			data:param,
  			timeout:30000,
  			//设置上传进度
  			onUploadProgress:(e) => {

  				console.log('上传成功');
				  

  			}
  		}).then(result =>{

  			console.log(result);

  			//赋值
  			this.src = 'http://q68kd6659.bkt.clouddn.com/'+result.data.key;

  			//视频地址
  			this.videosrc = 'http://q68kd6659.bkt.clouddn.com/'+result.data.key;
  		});

	  },
	  //语言切换
	  lang_change:function(){
		  console.log(this.lang);
		  //判断语言
		  if(this.lang == true){
			  //英文
			  this.$i18n.locale = 'en'
			  localStorage.setItem('lang','en')
		  }else{
			  //单选
			  this.$i18n.locale = 'cn'
			  localStorage.setItem('lang','cn')
		  }
		  
	  },
	  
  	
  }
}


</script>
 
<style>

</style>